<template>
  <div class="order-detail">
    <!-- 头部导航 -->
    <div class="header">
      <div class="left" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="title">订单明细</div>
      <div class="right"></div>
    </div>

    <!-- Tab切换 -->
    <div class="tab-container">
      <div class="tab-list">
        <div v-for="tab in tabs"
             :key="tab.type"
             :class="['tab-item', { active: currentTab === tab.type }]"
             @click="handleTabClick(tab.type)">
          {{ tab.name }}
        </div>
      </div>
    </div>

    <!-- 月份选择 -->
    <div class="month-select">
      <el-select v-model="selectedMonth" placeholder="本月">
        <el-option
          v-for="item in monthOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <div v-for="(order, index) in orderList"
           :key="index"
           class="order-item"
           @click="goToParticulars(order)">
        <div class="order-header">
          <span class="time">{{ order.createTime }}</span>
          <span :class="['status', order.payStatus]">{{ order.statusText }}</span>
        </div>
        <div class="patient-info">
          <span class="name">{{ order.patientName }}</span>
          <span class="gender">{{ order.sex==1?"男":"女" }}</span>
          <span class="age">{{ order.age }}岁</span>
        </div>
        <div class="order-footer">
          <span class="amount">¥{{ formatMoney(order.payPrice) }}</span>
          <span :class="['type', order.type]">{{ order.typeText }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderList } from '@/api/myincome/myincome'


export default {
  data() {
    return {
      tabs: [
        { type: 'all', name: '全部' },
        { type: 'image', name: '图文问诊' },
        { type: 'quick', name: '极速问诊' },
        { type: 'prescription', name: '开药问诊' },
        { type: 'private', name: '私人医生' }
      ],
      currentTab: 'all',
      selectedMonth: '',
      monthOptions: [
        { value: 'current', label: '本月' },
        { value: 'last', label: '上月' }
      ],
      orderList: []
    }
  },
  created() {
    // 获取路由参数
    const { year, month } = this.$route.query
    this.getOrderList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleTabClick(type) {
      this.currentTab = type
      this.getOrderList()
    },
    formatMoney(value) {
      const num = parseFloat(value || 0)
      return num.toFixed(2)
    },

    async getOrderList() {
      try {
        const res = await getOrderList({
          year:this.$route.query.year,
          month: this.$route.query.month
        })
        this.orderList = res || []
      } catch (error) {
        console.error('获取订单列表失败:', error)
      }
    },
    goToParticulars(order) {
      this.$router.push({
        path: '/myincome/particulars',
        query: { orderId: order.id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background: #fff;
  border-bottom: 1px solid #eee;

  .title {
    font-size: 17px;
    font-weight: 500;
  }

  .left {
    cursor: pointer;
  }
}

.tab-container {
  background: #fff;
  border-bottom: 1px solid #eee;

  .tab-list {
    display: flex;
    padding: 0 15px;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }

    .tab-item {
      padding: 12px 15px;
      font-size: 14px;
      color: #666;
      white-space: nowrap;
      cursor: pointer;

      &.active {
        color: #409EFF;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 15px;
          right: 15px;
          height: 2px;
          background: #409EFF;
        }
      }
    }
  }
}

.month-select {
  padding: 10px 15px;
  background: #fff;
  margin-bottom: 10px;
}

.order-list {
  padding: 0 15px;

  .order-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;

    .order-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .time {
        color: #999;
        font-size: 14px;
      }

      .status {
        font-size: 14px;
        &.completed { color: #67C23A; }
        &.closed { color: #909399; }
      }
    }

    .patient-info {
      margin-bottom: 10px;
      font-size: 15px;

      .gender, .age {
        margin-left: 10px;
        color: #666;
      }
    }

    .order-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .amount {
        color: #FF4949;
        font-size: 16px;
        font-weight: 500;
      }

      .type {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;

        &.image { color: #409EFF; background: #ECF5FF; }
        &.quick { color: #E6A23C; background: #FDF6EC; }
        &.prescription { color: #67C23A; background: #F0F9EB; }
        &.private { color: #909399; background: #F4F4F5; }
      }
    }
  }
}
</style>
